<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<view class="header">
			<view class="userinfo" @click="navTo('info')">
				
				<view class="info" style="flex:1;display: flex;justify-content: space-between;">
					<view>
						<view><span style="font-size: 24rpx;">任务名称：</span> <span class="username">{{form.taskName}}</span></view>
						<view><span style="font-size: 24rpx;">任务描述：</span> <span class="usercode">{{form.desp}}</span></view>
					</view>
				</view>
				<u-tag :text="form.status" shape="circle" style="height: 55rpx;margin-right: 20rpx;" />
			</view>
			<u-card :full="true">
				<view slot="head">
					<view style="display: flex;">
						进度：<u-slider v-model="formProcess.rate" :disabled="notCanEdit()" height="30" style="width: 500rpx;"></u-slider><span style="margin-left: 40rpx;">{{formProcess.rate}}%</span>
					</view>
				</view>
				<view slot="body" style="padding: 5rpx;">
					<u-form
							labelPosition="left"
							:model="formProcess"
							:rules="rules"
							ref="uForm">
						<u-form-item prop="desp" label="描述" borderBottom>
							<u-input v-model="formProcess.desp" :disabled="notCanEdit()" type="textarea" :border="true" :height="100" autoHeight/>
						</u-form-item>
						<u-form-item prop="desp" label="时间" borderBottom>
							<view style="text-align: center;" @click="showDate = true">
								<span>{{formProcess.beginDate}}</span>至<span>{{formProcess.pfinishDate}}</span>
							</view>
							<u-calendar v-model="showDate" max-date="2050-01-01"  mode="range" @change="changeDate" ></u-calendar>
						</u-form-item>
					<u-button type="success" :disabled="notCanEdit()" @click="submit">提交</u-button>
					</u-form>
				</view>
			</u-card>
		</view>
		<u-divider>执行记录</u-divider>
		<view >
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<u-time-line >
				<u-time-line-item v-for="(item,index) in this.processList" v-bind:key="index" nodeTop="20">
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
						<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.createTime}}</view>
							<view><span class="u-order-desc" style="font-size: 32rpx;color: #3c9cff;margin-right: 15rpx;">{{item.createName}}:</span><span class="u-order-desc">{{item.desp}}</span></view>
							<u-line-progress type="success" :percent="item.rate"></u-line-progress>
							<view style="display: flex;justify-content: space-between;">
								<view class="u-order-time">{{item.beginDate}}</view>
								<view class="u-order-time">{{item.pfinishDate}}</view>
							</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		
	</view>
</template>
<script>
export default {
		data() {
			return {
			show: false,
			showDate:false,
			yUsername:uni.getStorageSync('username')||'',
			form:{},
			subjectForm:{},
			formProcess:{
				rate:50,
				desp:'',
				beginDate:this.$u.date(new Date(), 'yyyy-mm-dd'),
				pfinishDate:this.$u.date(new Date(), 'yyyy-mm-dd'),
				
			},
			list: [{
				name: '申请详情'
			}, {
				name: '查看数据',
			}],
			processList:[],
			m2mOrderFlowList:[],
			current: 0,
			status: 'loadmore',
			iconType: 'circle',
			tmpDate: '',
			loadText: {
				loadmore: '点击加载更多',
				loading: '正在加载...',
				nomore: '没有更多了'
			},
			rules: {
				'formProcess.desp':{
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				}
			},
			}
		},
		created(){
		},
		onLoad(option){
			if (option.token) {
				uni.setStorageSync('token', option.token);
				this.$u.api.getProfile().then(res => {
					if(res.code == 200){
						uni.setStorageSync("username",res.data.user.userName)
					}
				})
			}
			if(option.id){
				this.getTaskByTaskId(option.id)
				this.findAllProcessByTaskId(option.id)
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getTaskByTaskId(taskId){
				this.$u.api.getTask(taskId).then(res => {
					this.form = res.data
					this.formProcess.rate = res.data.rate
					this.formProcess.taskId = res.data.taskId
					this.getSubjectBySubjectId(res.data.subjectId)
				})
			},
			getSubjectBySubjectId(subjectId){
				this.$u.api.getSubject(subjectId).then(res => {
					this.formProcess.subjectId = res.data.subjectId
					this.formProcess.subjectNo = res.data.subjectNo
					this.subjectForm = res.data
				})
			},
			findAllProcessByTaskId(taskId){
				this.$u.api.findAllByTaskId(taskId).then(res => {
					this.processList = res.data
				})
			},
			changeDate(e){
				this.formProcess.beginDate = e.startDate
				this.formProcess.pfinishDate = e.endDate
			},
			submit(){
				this.$u.api.saveProcess(this.formProcess).then(res => {
					if(res.code == 200){
						this.$u.toast('保存成功');
						this.getTaskByTaskId(this.form.taskId)
						this.findAllProcessByTaskId(this.form.taskId)
					}else{
						this.$u.toast(res.msg);
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			notCanEdit(){
				const obj = this.form
			  if(this.yUsername == 'admin'){
				return false;
			  }
			  return (obj.createBy != this.yUsername
			  && obj.headUser.indexOf(this.yUsername+',') < 0)
			}
		}

	}
</script>
<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 32px;
		height:32px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}
}
.header {
	background-color: #ffffff;
	
	.userinfo {
		display: flex;
		padding: 20rpx 20rpx 10rpx;

		.image {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			image {
				border-radius: 100%;
				width: 100%;
				height: 100%;
			}
		}

		.info {
			display: flex;
			flex-flow: wrap;
			padding-left: 30rpx;
			color: #333333;

			.username {
				width: 100%;
				font-size: 32rpx;
				color: #3c9cff;
			}

			.usercode {
				padding: 0;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.logout {
		flex-shrink: 0;
		position: absolute;
		right: 70rpx;
		top: 65rpx;
		.u-btn {
			font-size: 30rpx;
		}
	}
}
.u-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 100rpx;
		display: flex;
		margin-left: 40rpx;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
